<template>
	<view class="container">
		<!--用户信息、日期-->
		<view class="header" v-for="item in users" :key="item.id">
			<view>
				<!--用户名-->
				<view class="userName">{{item.userName}}</view>
				<!--日期-->
				<view class="date">{{currentTime }}</view>
			</view>
			<!--用户头像-->
			<view ><image :src=item.userAvatar></image></view>
		</view>
		<!--计划列表范围-->
		<scroll-view class="scroll" scroll-y="true">
			<!--计划列表-->
			<view class="planList" v-for="item in plan" :key="item.id"> 
				<!--计划名-->
				<view class="planName">
					<view>{{item.planName}}</view>
					<view>
						<navigator url="/pages/updatePlan/updatePlan" hover-class="navigator-hover" @click="update" :data-id="item.planId">
							修改计划
						</navigator>
						
					</view>
				</view>
				<view class="planContent">
					<!--剩余天数-->
					<view>
						<view>剩余</view>
						<view> <text class="txt">{{ getDay(item.planTime)}}</text>天</view>
					</view>
					<!--今日题量-->
					<view>
						<view>今日题量</view>
						<view><text  class="txt">{{item.planQuestions}}</text>题</view>
					</view>
				</view>
				<view class="progress">
					<!--完成进度-->
					<view>
						<view class="progressContent1"><text>{{getProgress(item.planQuestions,getTotal(item.planQuestions,item.planDays))}}%</text></view>
						<view class="protext1">已学完<text>{{item.planQuestions}}/{{getTotal(item.planQuestions,item.planDays)}}</text></view>
					</view>
					<!--今日新学进度-->
					<view>
						<view  class="progressContent2"><text>{{getProgress(0,item.planQuestions)}}%</text></view>
						<view class="protext2">
							<view>今日需新学<text>0/{{item.planQuestions}}</text></view>
							<view>今日需复习<text>0</text></view>
						</view>
					</view>
				</view>
				<!--开始学习按钮-->
				<view>
					<button class="btn">开始学习吧</button>
				</view>
			</view>
		
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTime: '',
				daysRemaining:0,
				time:[],
				plan:[],
				users:[],
			}
		},
		onLoad() {
		    this.updateTime();
		    // 如果你想要实时更新时间，可以使用 setInterval
		    setInterval(() => {
		      this.updateTime();
		    }, 1000); // 每秒更新一次时间
			
		  },
		  mounted() {
		  	//var that=this;
		  	//箭头函数指向是父级this指向
			this.getPlanList();
			this.getUser();
		  },
		methods: {
			getDay(dataStr){
				let value = new Date(dataStr).getTime() - new Date().getTime();
				return Math.ceil(value/1000/60/60/24);
			},
			 getTotal(n,m){
			 	let value=n*m;
			 	return value;
			 },
			 getProgress(n,m){
			 	let value=(n/m)*100;
			 	return value;
			 },
			getPlanList:function(){
				uni.request({
					url:"http://localhost:8888/planList",
					success:(res)=>{
						if(res.data.code==0){
						this.plan=res.data.data;
						this.$forceUpdate();
						}
						else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			getUser:function(){
				uni.request({
					url:"http://localhost:8888/userContent",
					success:(res)=>{
						if(res.data.code==0){
						this.users=res.data.data;
						this.$forceUpdate();
						}
						else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			updateTime() {
				const now = new Date();
			    this.currentTime = this.formatTime(now);
			},
			formatTime(date) {
			    const year = date.getFullYear();
			    const month = date.getMonth() + 1;
			    const day = date.getDate();
				const days=date.getDay();
				const dayInchinese=['天','一','二','三','四','五','六'];
				const chineseDay=dayInchinese[days];
			    const hour = date.getHours();
			    const minute = date.getMinutes();
			    const second = date.getSeconds();
			
			    return `${this.pad(month)}月${this.pad(day)}日 星期${this.pad(chineseDay)} ${this.pad(hour)}:${this.pad(minute)}:${this.pad(second)}`;
			},
			pad(number) {
			    return number < 10 ? '0' + number : number;
			},
			update:function(e){
				var planId=e.target.dataset.id;
				uni.setStorage({
					key:'plan',
					data:planId,
					success:function() {
						console.log('ye');
					}
				});
			}
		}
	}
</script>

<style>
.container{
	display: flex;
	flex-direction: column;
	width: 750rpx;
	height: 1205rpx;
	background-color: rgb(246 245 245);
}
.header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 180rpx;
	margin-top: 10rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	box-shadow: 0 0 1rpx #90A674; /* 添加阴影效果 */
}
.header>view:nth-child(1){
	display: flex;
	flex-direction: column;
	width:400rpx;
	justify-content: center;
	padding-left: 50rpx;
}
.header>view:nth-child(2){
	display: flex;
	justify-content: center;
	align-items: center;
	width:200rpx;
	height: 180rpx;
	margin-left: 45rpx;
	padding-left: 20rpx;

}
.header>view:nth-child(2) image{
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;	
	opacity: 0.8;
}
.userName{
	color: #90A674;
}
.date{
	display: flex;
	margin-top: 10rpx;
	color:rgb(143, 143, 143);
}
.scroll{
	margin-top: 50rpx;
	height: 800rpx;
	width: 750rpx;
}
.planList{
	display: flex;
	flex-direction: column;
	width: 90%;
	height: 900rpx;
	margin-left: 40rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 0 1rpx #90A674; /* 添加阴影效果 */
}
.planName{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 120rpx;
	flex-direction: row;
	border-bottom: 5rpx dotted #90A674;
}
.planName>view:nth-child(1){
	display: flex;
	margin-left: 35rpx;
	width: 280rpx;
	font-size: 38rpx;
	font-weight: bold;
}
.planName>view:nth-child(2){
	display: flex;
	margin-top: 10rpx;
	width: 120rpx;
	font-size: 26rpx;
	color: #E8815E;
}
.planContent{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 120rpx;
}
.planContent>view{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width:280rpx;
	height: 120rpx;
	margin-top: 30rpx;
	color: rgb(143, 143, 143);
}
.planContent>view:nth-child(1){
	margin-left: 40rpx;
}
.planContent>view:nth-child(2){
	margin-right: 40rpx;
}
.txt{
	margin-right: 10rpx;
	font-size: 38rpx;
	color: black;
	font-weight: bold;
}
.progress{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 400rpx;
	margin-top: 30rpx;
}
.progress>view{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width:280rpx;
	height: 400rpx;

	
}
.progress>view:nth-child(1){
	margin-left: 40rpx;
}
.progress>view:nth-child(2){
	margin-right: 40rpx;
}
.progressContent1{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 127px;
	height: 127px;
	background-image: url("../../static/images/studied.jpg");
	opacity: 0.8;
}
.progressContent1>text{
	margin-top: 50rpx;
}
.progressContent2{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 127px;
	height: 127px;
	background-image: url("../../static/images/newStudy.jpg");
	opacity: 0.8;
}
.progressContent2>text{
	margin-top: 50rpx;
}
.protext1{
	display: flex;
	justify-content: center;
	flex-direction: row;
	width: 280rpx;
	height: 100rpx;
	color: rgb(143, 143, 143);
}
.protext1>text{
	color: rgb(44, 209, 140);
}
.protext2{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 280rpx;
	height: 100rpx;
	color: rgb(143, 143, 143);
}
.protext2>view:nth-child(1) text{
	color: rgb(255, 197, 131);
}
.protext2>view:nth-child(2) text{
	color: rgb(252, 161, 172);
}
.btn{
		display: flex;
		width: 350rpx;
		height: 80rpx;
		border-radius: 80rpx;
		align-items: center;
		justify-content: center;
		color: white;
		background-color: #90A674;;
	}
</style>
